<script setup>
import { ref } from 'vue'
import { DeleteFilled, Edit, Picture } from '@element-plus/icons-vue'
const options = ref([
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  }
])
const value1 = ref('')
const title = ref('标题   分类     发布时间')
const content = ref('博客内容。。。。。。。。。。')
</script>
<template>
  <CommonHeader>
    <template #title> 用户博客 </template>
    <template #body>
      <el-space
        >日期：
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :size="size"
        />
        分类：<el-select v-model="value" clearable placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        标题：<el-input></el-input>
        <el-button type="primary" plain="">Search</el-button>
        <el-button type="">重置</el-button>
      </el-space>
    </template>
    <!-- 用户博客展示表格 -->
    <el-table :data="options">
      <el-table-column label="">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item>
            <template #title>
              <el-space class="content">
                <el-image>
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                {{ title }}
                <el-button type="primary" plain circle
                  ><el-icon><Edit /></el-icon
                ></el-button>
                <el-button type="danger" plain circle
                  ><el-icon><DeleteFilled /></el-icon
                ></el-button>
              </el-space>
            </template>
            <div class="content">
              {{ content }}
              <el-space> </el-space>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-table-column>
    </el-table>
  </CommonHeader>
</template>
<style scoped>
.content {
  width: 100%;
  justify-content: space-between;
}
.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
